﻿@{
    ViewBag.Title = "忘记密码";
}
<script type="text/javascript" src="@Url.Content("~/Content/Default/JS/jquery.validate.js")"> </script>
<script type="text/javascript" src="@Url.Content("~/Content/Default/JS/messages_zh.js")"> </script>
<script type="text/javascript">
    $().ready(function () {
        $('form').validate({
            rules: {
                UserName: {
                    required: true,
                    minlength: 4
                },
                Validate: {
                    required: true,
                    number: true,
                    minlength: 4,
                    maxlength: 4
                }
            },
            messages: {
                UserName: {
                    required: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入用户名！</span>",
                    minlength: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入4位以上字符！</span>",
                },
                Validate: {
                    required: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入验证码！</span>",
                    number: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入数字！</span>",
                    minlength: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入四位验证码</span>",
                    maxlength: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入四位验证码</span>"
                }
            },
            errorPlacement: function (error, element) {
                if (element.is("#UserName")) {
                    error.appendTo('#username-error');
                }
                else if (element.is("#Validate")) {
                    error.appendTo('#validate-error');
                }
            }
        });
    });
</script>
<div class="ui-body">
    <div class="ui-inner">
        <div class="ui-title">
            <h1><i class="iconfont">&#xe624;</i> 找回密码</h1>
            <div class="triangle"></div>
        </div>
        <div class="ui-box">
            <div class="ui-box-step">
               <ol class="ui-step ui-step-4">
                    <li class="ui-step-start ui-step-active">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">1</i>
                            <span class="ui-step-text">输入账户名</span>
                        </div>
                    </li>
                    <li class="">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">2</i>
                            <span class="ui-step-text">验证账户名</span>
                        </div>
                    </li>
                    <li class="">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">3</i>
                            <span class="ui-step-text">重置密码</span>
                        </div>
                    </li>
                    <li class="ui-step-end">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="iconfont ui-step-number">&#xf00b2;</i>
                            <span class="ui-step-text">完成</span>
                        </div>
                    </li>
                </ol>
            </div>
             @using (Html.BeginForm("PostForgetPassword", "Account", FormMethod.Post, new { @class = "ui-form" }))
            {
                <fieldset>
                <legend>账户注册</legend>

                <div class="ui-form-item">
                    <label for="" class="ui-label"><span class="ui-form-required">*</span>用户名</label>
                    <input class="ui-input ui-input-large" type="text" id="UserName" name="UserName" value=""/> 忘记账户名？就使用邮箱或手机号码吧！
                    <p id="username-error"class="ui-form-explain ui-tiptext ui-tiptext-error"></p>
                </div>

                <div class="ui-form-item">
                    <label for="" class="ui-label"><span class="ui-form-required">*</span>验证码</label>
                    <input class="ui-input ui-input-large" type="text" data-explain="请输入右图中字符，不区分大小写。" maxlength="4" autocomplete="off" value="" id="Validate" name="Validate" />@Html.ValidateImage()
                    <a href="javascript:$('#ValicodeImg').click();">看不清，换一张</a>
                    <p id="validate-error"class="ui-form-explain ui-tiptext ui-tiptext-error"></p>
                </div>
  
                <div class="ui-form-item">
                    <input type="submit" id="submit"  class="ui-button ui-button-orange big" value="下一步"/>
                </div>

                </fieldset>
            }
         </div>
   </div>
</div>
